<template>
  <div id="temp">
    <div class="pheader">

    </div>
    <div class="pmiddle">
      <div class="pmiddle_top">
        <ul class="pmiddle_topMain">
          <!--  参数对比     -->
          <li class="" id="show">参数对比</li>
          <!--  外观对比     -->
          <li class="pmiddle_compare">外观对比</li>
          <!--   综合对比    -->
          <li class="pmiddle_compare">综合对比</li>
          <!--   参数     -->

        </ul>
      </div>
      <div class="pmiddle_mess">
        <ul class="pmiddle_comprehensive">
          <li>
            <div class="pmiddle_firstgid">
              <img src="" alt="">
              <h5></h5>
            </div>
            <p>电商报价</p>
            <p>上市日期</p>
            <p>类型</p>
            <p>CPU型号</p>
            <p>快充</p>
            <p>快充</p>
            <p>快充</p>
            <p>快充</p>
            <p>快充</p>
            <p>快充</p>
            <p>快充</p>
            <p>快充</p>
          </li>
          <li v-for = "(item,index) in PhoneList" @mouseover="Lilight(index)" @mouseout="Lilightout(index)" :class="lightflag == index?'Lilight':''">
            <div class="pmiddle_firstgid">
              <img src="../assets/logo.png" alt="">
              <h5>messagemessagemessagemessagemessagemessage</h5>
            </div>
            <p>{{item.price}}</p>
            <p>{{item.date}}</p>
            <p>{{item.type}}</p>
            <p>{{item.Cpu}}</p>
            <p>{{item.swift}}</p>
            <p>{{item.swift}}</p>
            <p>{{item.swift}}</p>
            <p>{{item.swift}}</p>
            <p>{{item.swift}}</p>
            <p>{{item.swift}}</p>
            <p>{{item.swift}}</p>
            <p>{{item.swift}}</p>
          </li>

        </ul>
        <div class="pmiddle_CpuMess">
          <h1>Cpu对比图</h1>
          <div id="pmiddle_Cpu" style="width: 100%;height: 50%;"></div>
          <div id="main" style="width: 100%;height: 50%;"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import echarts from 'echarts';
  export default {
    name: "PhoneCompare",
    data(){
      return{
        PhoneList: [
          {'price': '4500$',
            'date': '2020年2月01日',
            'type': '华为',
            'Cpu': '三星 Exynos 980',
            'swift': '支持',
            'lightflag': false,
          },
          {'price': '1500$',
            'date': '2019年12月01日',
            'type': '三星',
            'Cpu': '三星 Exynos 980',
            'swift': '不支持',
            'lightflag': false,
          },
          {'price': '5000$',
            'date': '2019年10月01日',
            'type': '苹果',
            'Cpu': 'ios Exynos 980',
            'swift': '支持',
            'lightflag': false,
          },
        ],
        lightflag : undefined,
        charts: '',
        charts_test: '',
        opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
        opinionData:[
          {value:335, name:'直接访问'},
          {value:310, name:'邮件营销'},
          {value:234, name:'联盟广告'},
          {value:135, name:'视频广告'},
          {value:1548, name:'搜索引擎'}
        ],
        colors : [
          "#3BA0FF",
          "#FAD337",
          "#975FE4",
        ],
        data :[
          {
            "name": "麒麟990",
            "value": 113.5
          },
          {
            "name": "麒麟810",
            "value": 99.2
          },
          {
            "name": "骁龙855",
            "value": 104.4
          },

        ]
      }
    },
    created() {

    },
    mounted() {
      var pmiddleClick = document.querySelectorAll('.pmiddle_topMain li');
      for(var i = 0; i< pmiddleClick.length; i++){
        pmiddleClick[i].index = i;
        pmiddleClick[i].onclick = function () {
          for(var j = 0; j< pmiddleClick.length; j++){
            pmiddleClick[j].id = '';
          }
          pmiddleClick[this.index].id = 'show';
        }
      };
      this.$nextTick(function() {
        this.drawPie('main');
        this.drawPic('pmiddle_Cpu');
      });
    },
    methods:{
      Lilight(index){
        this.lightflag = index;
      },
      Lilightout(index){
        this.lightflag = undefined;
      },
      drawPie(id){
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data:this.opinion
          },
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius:['50%','70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'blod'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:this.opinionData
            }
          ]
        })
      },

      drawPic(id){
        var finalData = this.data.map((item, index) => {
          var arr = new Array(this.data.length).fill(0);
          arr[index] = item.value;
          return arr;
        });
        this.charts_test = echarts.init(document.getElementById(id))
        this.charts_test.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            type: 'scroll',
            x: 'center',
            data: this.data.map(item => item.name)
          },
          xAxis: {
            type: 'category',
            data: this.data.map(item => item.name),
            show: true
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            // minInterval: 1,
            axisLabel: {
              color: 'rgba(0,0,0,0.45)'
            },
            axisLine: {
              show: false,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            }
          },
          series: this.data.map((item, index) => {
            // console.info('finalData', finalData[index]);
            return {
              name: item.name,
              data: finalData[index],
              barWidth: '30%',
              type: 'bar',
              stack: '堆叠法',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: function(params) {
                    // console.info('params', params);
                    return params.value || ''
                  },
                  fontSize: 12
                }
              }
            }
          })
        });
        // console.log(this.charts_test.setOption.tooltip)
      }
    },


  }

</script>

<style scoped>
  #temp {
    height: 100%;
    /*margin: auto;*/
    /*width: 1300px;*/
  }

  .pmiddle {
    width: 1300px;
    margin: auto;

  }

  .pmiddle_top {
    background-color: yellowgreen;
    height: 80px;
  }

  #show{
    display: block;
    background-color: red;
  }
  .pmiddle_topMain {
    background-color: cyan;
    margin: auto;
    width: 80%;
    height: auto;
  }
  .pmiddle_topMain li{
    background-color: chocolate;
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 5px;
    border: 1px solid white;
  }

  .pmiddle img {
    width: 150px;
    height: auto;
    padding: 10px;
  }

  .pmiddle_mess{
    height: auto;
    display: flex;
  }

  .pmiddle_comprehensive {
    background-color: #00faff;
    display: flex;
    width: 60%;
    height: auto;
  }

  .pmiddle_comprehensive li {
    /*margin: 5px 0 0 10px;*/
    /*width: 100%;*/
    /*padding: 10px;*/
    border: 1px solid antiquewhite;
    width: 200px;

  }
  .pmiddle_CpuMess{
    width: 40%;
    height: inherit;
    text-align: center;
    background-color: greenyellow;
    /*float: right;*/
  }
  .pmiddle_firstgid{
    height: 200px;
    padding: 5px;
  }
  .pmiddle_firstgid h5{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .pmiddle_comprehensive li p {
    border-top: 1px solid crimson;
    padding: 5px;
    height: 30px;
    line-height: 30px;
  }
/*  高亮  */
  .Lilight{
    background-color: darkgrey;
  }
</style>
